import { lazy, Suspense } from 'react'
// 导入路由导航守卫组件
import AuthRoute from '@/components/AuthRoute'
// 当组件因为网络原因未加载完毕时，会加载Loading组件
import Loading from '@/pages/Loading'
const Layout = lazy(() => import('@/pages/Layout'))
const Login = lazy(() => import('@/pages/Login'))
const NotFound = lazy(() => import('@/pages/NotFound'))
const Home = lazy(() => import('@/pages/Home'))
const Video = lazy(() => import('@/pages/Video'))
const Question = lazy(() => import('@/pages/Question'))
const Profile = lazy(() => import('@/pages/Profile'))
const ProfileEdit = lazy(() => import('@/pages/Profile/Edit'))
const ProfileFeedback = lazy(() => import('@/pages/Profile/Feedback'))

// 配置路由对象
const routes = [
  // 修改个人基本资料
  {
    path: '/profile/edit',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        {/* 使用导航守卫组件包裹 */}
        <AuthRoute>
          {/* 此组件需要登录 */}
          <ProfileEdit></ProfileEdit>
        </AuthRoute>
      </Suspense>
    ),
  },
  // 用户反馈
  {
    path: '/profile/feedback',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        {/* 使用导航守卫组件包裹 */}
        <AuthRoute>
          {/* 此组件需要登录 */}
          <ProfileFeedback></ProfileFeedback>
        </AuthRoute>
      </Suspense>
    ),
  },
  {
    path: '/',
    element: <Layout></Layout>,
    children: [
      {
        path: '',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            <Home></Home>
          </Suspense>
        ),
      },
      {
        path: 'question',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            <Question></Question>
          </Suspense>
        ),
      },
      {
        path: 'video',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            <Video></Video>
          </Suspense>
        ),
      },
      // 个人中心
      {
        path: 'profile',
        element: (
          <Suspense fallback={<Loading></Loading>}>
            {/* 使用导航守卫组件包裹 */}
            <AuthRoute>
              {/* 此组件需要登录 */}
              <Profile></Profile>
            </AuthRoute>
          </Suspense>
        ),
      },
    ],
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        <Login></Login>
      </Suspense>
    ),
  },
  {
    // 404路由
    path: '*',
    element: (
      <Suspense fallback={<Loading></Loading>}>
        <NotFound></NotFound>
      </Suspense>
    ),
  },
]

// 导出路由对象
export default routes
